<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Balzac HTML Template - Style Selection</title>

        <link id="theme-css" rel="stylesheet" href="css/theme.css">

        <style type="text/css">

            body {
                overflow-x: hidden;
                width: 100%;
                margin: 0;
            }

            [class*='bh-style-'] {
                display: block;
                position: relative;
                -moz-box-sizing: border-box;
                     box-sizing: border-box;
                width: 100%;
            }

            [class*='bh-style-'] > div {
                position: relative;
                top: 50%;
                -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                        transform: translateY(-50%);
            }

            @media (max-width: 768px) {

                [class*='bh-style-'] {
                    height: 50vh;
                    padding: 70px;
                }

                [class*='bh-style-'] img {
                    max-height: 80%;
                    width: auto;
                }

                [class*='bh-style-'] .uk-navbar-brand {
                    font-size: 24px;
                    line-height: 24px;
                }

                [class*='bh-style-'] h4 {
                    font-size: 14px;
                    line-height: 16px;
                }

            }

            @media (max-width: 768px) and (orientation : landscape) {

                [class*='bh-style-'] {
                    float: left;
                    width: 50%;
                    height: 100vh;
                }

            }

            @media (min-width: 768px) {

                [class*='bh-style-'] {
                    float: left;
                    width: 50%;
                    height: 100vh;
                    padding: 50px 100px;
                }

            }

            @media (min-width: 768px) and (orientation : portrait) {

                [class*='bh-style-'] {
                    width: 100%;
                    float: none;
                    height: 50vh;
                }

                [class*='bh-style-'] img {
                    max-height: 70%;
                    width: auto;
                }

            }

            [class*='bh-style-'] .uk-navbar-brand { float: none; }

            .bh-style-light { background: #fff; }

            .bh-style-light img { box-shadow: 0 0 15px 0 rgba(0,0,0,0.1); }
            .bh-style-light img:hover { box-shadow: 0 0 20px 0 rgba(0,0,0,0.15); }

            .bh-style-dark { background: #292928; }
            .bh-style-dark img { box-shadow: 0 0 15px 0 rgba(0,0,0,0.2); }
            .bh-style-dark img:hover { box-shadow: 0 0 20px 0 rgba(0,0,0,0.4); }

            .bh-style-dark img,
            .bh-style-light img {
                -webkit-transition: all 0.4s;
                        transition: all 0.4s;
            }

            .bh-style-dark img:hover,
            .bh-style-light img:hover {
                -webkit-transition: all 0.4s;
                        transition: all 0.4s;
            }

            .bh-style-dark .uk-text-primary { color: #d8b176 !important; }

            .bh-style-dark * {
                font-family: "Playfair Display", serif;
                color: #ddd !important;
            }

        </style>

    </head>

    <body>
        <div class="bh-style-light uk-text-center">
            <div class="uk-animation-fade">
                <a href="frontpage.html?style=default"><img src="images/style_selection-light.jpg"><br></a>
                <div class="uk-animation-fade bh-animation-delay-400">
                    <a class="uk-navbar-brand uk-margin-top uk-margin-small-bottom" href="balzac/frontpage.html?style=default"><span class="uk-text-primary">Bal</span>zac</a>
                    <h4 class="uk-margin-remove">Light Style</h4>
                </div>
            </div>
        </div>
        <div class="bh-style-dark uk-text-center">
            <div class="uk-animation-fade">
                <a href="frontpage.html?style=dark"><img src="images/style_selection-dark.jpg"><br></a>
                <div class="uk-animation-fade bh-animation-delay-400">
                    <a class="uk-navbar-brand uk-margin-top uk-margin-small-bottom" href="balzac/frontpage.html?style=dark"><span class="uk-text-primary">Bal</span>zac</a>
                    <h4 class="uk-margin-remove">Dark Style</h4>
                </div>
            </div>
        </div>
    </body>
</html>
